<template>
  <div class="tabBarWrap">
    <div class="tabBar">
      <router-link to="/views/Business/index" tag="div" class="tabBar_item tabBar_item_jumpicon">
        <img :src="`${tabIconBusiness[0]?'../../../../static/img/business/tab/icon_hom.png':'../../../../static/img/business/tab/icon_hom2.png'}`" alt="">
        <div>首页</div>
      </router-link>
      <router-link to="/views/Business/order" tag="div" class="tabBar_item tabBar_item_jumpicon">
        <img :src="`${tabIconBusiness[1]?'../../../../static/img/business/tab/icon_dingdan2.png':'../../../../static/img/business/tab/icon_dingdan.png'}`" alt="">
        <div>订单</div>
      </router-link>
      <router-link to="/views/Business/my" tag="div" class="tabBar_item tabBar_item_jumpicon">
        <img :src="`${tabIconBusiness[2]?'../../../../static/img/business/tab/icon_wode2.png':'../../../../static/img/business/tab/icon_wode.png'}`" alt="">
        <div>我的</div>
      </router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  export default {
    name: "tabBar",
    data() {
      return {

      }
    },
    computed:{
      ...mapState(['tabIconBusiness'])
    },
    methods: {
      goErrands(){
        this.$router.push({
            name:'errands'
        })
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>
  .tabBar {
    width: 100%;
    height: .5rem;
    background-color: #FFFFFF;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  .tabBar_item {
    width: calc(100% / 3);
    height: 100%;
    color: #666666 !important;
  }

  .tabBar_item div {
    font-size: .1rem;
  }

  .tabBar_item_pt {
    width: .66rem;
    height: .66rem;
    position: relative;
    bottom: .05rem;
  }

  .tabBar_item_pt img {
    width: 100%;
    height: 100%;
  }

  .tabBar_item_jumpicon {
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
  }

  .tabBar_item_jumpicon img {
    width: .22rem;
    height: .24rem;
  }
  /* router-link 切换样式 */
  .router-link-active {
    color: #FB4448 !important;
  }
</style>
